<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>WireIt - WiringEditor</title>
	<link rel="icon" href="../favicon.ico" type="image/png" />
  <link rel="SHORTCUT ICON" href="../favicon.ico" type="image/png" />

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../../../lib/yui/assets/skins/sam/skin.css" />

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../../../plugins/inputex/lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../../../plugins/editor/lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../../../assets/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../../../plugins/editor/assets/WireItEditor.css" />
<link rel="stylesheet" type="text/css" href="sawire.css">  

<!-- YUI -->
<script type="text/javascript" src="../../../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../../../lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/container/container.js"></script>
<script type="text/javascript" src="../../../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/tabview/tabview-min.js"></script>

<!-- YUI-Accordion -->
<script src="../../../../plugins/editor/lib/accordionview/accordionview-min.js"  type='text/javascript'></script>

<!-- InputEx -->
<script src="../../../../plugins/inputex/lib/inputex/js/inputex.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/lib/inputex/js/Field.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/js/WirableField.js" type="text/javascript"></script>
<script src="../../../../plugins/inputex/lib/inputex/js/Group.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/lib/inputex/js/mixins/choice.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/lib/inputex/js/fields/StringField.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/lib/inputex/js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/lib/inputex/js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/lib/inputex/js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/lib/inputex/js/fields/ListField.js"  type='text/javascript'></script>
<script src="../../../../plugins/inputex/lib/inputex/js/fields/CheckBox.js"  type='text/javascript'></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../../../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../../../../js/WireIt.js"></script>
<script type="text/javascript" src="../../../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../../../js/LayerMap.js"></script>
<script type="text/javascript" src="../../../../js/Wire.js"></script>
<script type="text/javascript" src="../../../../js/BezierWire.js"></script>
<script type="text/javascript" src="../../../../js/Terminal.js"></script>
<script type="text/javascript" src="../../../../js/TerminalProxy.js"></script>
<script type="text/javascript" src="../../../../js/TerminalInput.js"></script>
<script type="text/javascript" src="../../../../js/TerminalOutput.js"></script>
<script type="text/javascript" src="../../../../js/Scissors.js"></script>
<script type="text/javascript" src="../../../../js/DD.js"></script>
<script type="text/javascript" src="../../../../js/DDResize.js"></script>
<script type="text/javascript" src="../../../../js/Container.js"></script>
<script type="text/javascript" src="../../../../js/Layer.js"></script>

<!-- WireIt inputex-->
<script src="../../../../plugins/inputex/js/FormContainer.js" type="text/javascript" ></script>

<!-- WireIt Editor -->
<script type="text/javascript" src="../../../../plugins/editor/js/BaseEditor.js"></script>
<script type="text/javascript" src="../../../../plugins/editor/js/ModuleProxy.js"></script>
<script type="text/javascript" src="../../../../plugins/editor/js/WiringEditor.js"></script>

<!-- Storage Engine -->
<script type="text/javascript" src="../../../../plugins/editor/js/adapters/web-storage.js"></script>

<!-- Our Code -->
<script type="text/javascript" src="ExecutionFrame.js"></script>
<script type="text/javascript" src="modules.js"></script>
<script type="text/javascript" src="xml/util.js"></script>
<script type="text/javascript" src="sawire.js"></script>
<script type="text/javascript" src="containers/jsrunner.js"></script>
<script type="text/javascript" src="xml/xmltoken.js"></script>
<script type="text/javascript" src="xml/xpath.js"></script>
<script type="text/javascript" src="xml/xslt.js"></script>
<script type="text/javascript" src="xml/dom.js"></script>


<style>
/* Comment Module */
div.WireIt-Container.WiringEditor-module-comment { width: 200px; }
div.WireIt-Container.WiringEditor-module-comment div.body { background-color: #EEEE66; }
div.WireIt-Container.WiringEditor-module-comment div.body textarea { background-color: transparent; font-weight: bold; border: 0; }
</style>


<script>
// InputEx needs a correct path to this image
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";
YAHOO.util.Event.onDOMReady( sawire.init, sawire,true);
</script>

</head>

<body class="yui-skin-sam">

	<div id="top">
		<div class="logo">WiringEditor</div>
		<div id="toolbar"></div>
		<div class="topright">
			<span>Hello there !</span> | 
			<a href="../..">back to WireIt</a>
		</div>
	</div>


	<div id="left">
	</div>
	
	<div id="right">
	  <ul id="accordionView">
		<li>
			<h2>Properties</h2>
			<div>
				<div id="propertiesForm"></div>
			</div>
		</li>
		<li>
			<h2>Minimap</h2>
			<div style='position: relative;'>
				<div id="layerMap"></div>
			</div>
		</li>
		<li>
			<h2>Grouping</h2>
			<div>
				<div id="groupBody">
				    Select some containers using the G in the top right corner then click to make the group
				    <button id="makeGroupButton" onclick="sawire.editor.layer.grouper.makeGroup()">Make</button>
				</div>
				<br />
				<div id="groupConfig"></div>
			</div>
		</li>		
	  </ul>
	</div>

	<div id="center">
	</div>
	
	
	<div id="helpPanel">
	    <div class="hd">Welcome to the WiringEditor demonstration</div>
	    <div class="bd" style="text-align: left;">
					
					<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
					<br />
					<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
					<br />
					<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
					<br />
					<p>Close this dialog to test the WiringEditor</p>
	    </div>
	</div>

</body>
</html>